// 横屏个人页面
class ProfilePage {
  constructor(canvas, ctx, gameManager, api, rootImgUrl) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.gameManager = gameManager;
    this.api = api
    this.rootImgUrl = rootImgUrl
    this.avatar = wx.createImage();
    this.backIcon = wx.createImage();
    this.mainBg = wx.createImage();
    this.logsIcon = wx.createImage();
    // 当前选中的菜单索引
    this.selectedMenuIndex = 0;
    // 菜单数据
    this.menus = [
      {
        text: '基本信息',
        description: '数据分析'
      },
      {
        text: '练习赛战绩',
        description: '游戏中心'
      },
      {
        text: '挑战赛战绩',
        description: '系统设置'
      }
    ];
  }

  onEnter() {
    this.loadResources()
    console.log('进入横屏个人页面');
  }

  onLeave() {
    console.log('离开个人页面');
  }

  update() {
    // 个人页面的更新逻辑
  }

  loadResources() {
    // 加载头像图片
    this.avatar.src = this.rootImgUrl + 'avatar.png';
    // 加载LOG图标
    this.logsIcon.src = this.rootImgUrl + 'userLogs.png';
    // 中间菜单背景图
    this.mainBg.src = this.rootImgUrl + 'userBg.png';
    // 加载返回按钮图标
    this.backIcon.src = this.rootImgUrl + 'backIcon.png';

    // 资源加载完成后开始渲染
    let loadedCount = 0;
    const totalResources = 4;

    const checkLoaded = () => {
      loadedCount++;
      if (loadedCount === totalResources) {
        this.render();
      }
    };

    this.avatar.onload = checkLoaded;
    this.backIcon.onload = checkLoaded;
    this.mainBg.onload = checkLoaded;
    this.logsIcon.onload = checkLoaded;
  }

  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 横屏个人页面背景
    this.ctx.drawImage(this.mainBg, 0, 0, this.canvas.width, this.canvas.height);

    const userData = this.gameManager.getUserData();

    this.ctx.drawImage(this.avatar, this.canvas.width / 2 - this.avatar.width / 2, 230, this.avatar.width, this.avatar.height);
    this.ctx.drawImage(this.logsIcon, this.canvas.width - this.logsIcon.width - 20, this.canvas.height - this.logsIcon.height - 30, 206, 50);
    this.ctx.drawImage(this.backIcon, 78, 28, 28, 42);

    this.ctx.fillStyle = '#ffffff';
    this.ctx.font = '32px Microsoft YaHei-Regular';
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'top';
    this.ctx.fillText('ID:2343131', this.canvas.width / 2, 496);

    this.ctx.font = '60px Microsoft YaHei-Regular';
    this.ctx.fillText('阿里巴巴哈利', this.canvas.width / 2, 560);

    // 绘制所有菜单
    this.menus.forEach((item, index) => {
      this.drawMenu(item, 0, 104 + index * 102, index === this.selectedMenuIndex);
    });

  }

  // 绘制单个菜单
  drawMenu(menu, x, y, isSelected) {
    // 绘制背景
    const gradient = this.ctx.createLinearGradient(x, y, x + 192, y + 102);
    if (isSelected) {
      // 选中状态：渐变背景
      gradient.addColorStop(0, '#935E2D');
      gradient.addColorStop(1, '#F1D48B');
    } else {
      // 未选中状态：渐变背景
      gradient.addColorStop(0, '#113258');
      gradient.addColorStop(1, '#014069');
    }
    this.ctx.fillStyle = gradient
    this.ctx.fillRect(x, y, 192, 102);

    // 绘制菜单文字
    this.ctx.font = 'bold 28px Microsoft YaHei-Regular';
    this.ctx.fillStyle = '#FFFFFF';
    this.ctx.textAlign = 'center';
    this.ctx.fillText(menu.text, 96, y + 51 - 10);
  }

  handleTouch(x, y) {
    // 检查是否点击了返回按钮
    if (x >= 39 && x <= 70 && y >= 14 && y <= 35) {
      this.gameManager.switchPage('main');
    }

    if (x >= 0 && x <= 96) {
      if (y >= 60 && y <= 110) {
        this.selectedMenuIndex = 0
      } else if (y >= 111 && y <= 160) {
        this.selectedMenuIndex = 1
      } else if (y >= 161 && y <= 210) {
        this.selectedMenuIndex = 2
      }
    }
  }

  handleKeyDown(e) {
    if (e.keyCode === 32) {

    }
  }
  handleTouchEnd(e) {

  }
  handleTouchMove(e) {

  }
}

export default ProfilePage;